{extend name="public/base" /}
{block name="title"}商品SKU列表{/block}
{block name="css"}
<style type="text/css">
tbody .layui-table-cell{height:50px;line-height:50px;}
tbody .layui-table-cell img{width: auto;height: 50px}
</style>
{/block}
{block name="content"}
<div class="layui-fluid">   
  <div class="layui-card">
    <form class="layui-form layui-card-header layuiadmin-card-header-auto" id="searchForm">
      <div class="layui-form-item asuma-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="goods_name" autocomplete="off" class="layui-input">
            </div>
        </div>

         <div class="layui-inline">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-block">
              <select name="class_id" lay-search lay-reqText="请选择分类">
                <option value="">支持搜索</option>
                {volist name="classify" id="one"}
                <optgroup label="{$one.name}">
                  {if $one.child ?? ''}
                  {volist name="$one.child" id="two"}
                  <option value="{$two.id}">{$two.name}</option>
                  {/volist}
                  {/if}
                </optgroup>
                {/volist}
              </select>
            </div>
          </div>

        <div class="layui-inline">
        <label class="layui-form-label">是否上架</label>
        <div class="layui-input-block">
            <select name="is_sold">
              <option value="">所有</option>
              <option value="1" selected="">是</option>
              <option value="0">否</option>
            </select>
        </div>
    </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-asuma layuiadmin-btn-admin" lay-submit lay-filter="goodsSearch">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
        </div>
      </div>
    </form>
    
    <div class="layui-card-body">
        <table id="goodsSku" lay-filter="goodsSku"></table>  
    </div>
  </div>
</div>
{/block}
{block name="footjs"}
<script type="text/html" id="statusTpl" data-url="{:route('Shop/changeSkuSold')}">
  {{# if(d.main_sold != 1){ }}
  已下架
  {{# }else{ }}
  <input type="checkbox" name="is_sold" value="{{d.id}}" data-gid="{{d.goods_id}}" lay-skin="switch" lay-text="是|否" lay-filter="optstatus" {{d.is_sold == 1 ? 'checked' : ''}}>
  {{# } }}
</script>

<script type="text/html" id="optTpl">
  <a class="layui-btn layui-btn-asuma layui-btn-xs" lay-event="change">设置</a>
</script>
  <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> -->

<script>
  layui.config({
    base: '__JS__/layuiext/' //静态资源所在路径
  }).use([ 'table','form','upload'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table
    ,upload = layui.upload;


   var tableIns =  table.render({
      elem: '#goodsSku'
      ,url: "{:route('Shop/goodsSkuList')}"
      ,page: true //开启分页
      ,limit:10
      ,limits:[10,25,50]
      ,where: {is_sold: 1}
      ,done:function (res, curr, count) {
        if(count <= this.limit){
          $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
        }
      }
      ,cols: [[ //表头
        {field: 'goods_name', title: '商品名称', rowspan: 2, width: '20%'}
        ,{field: 'sku', title: 'SKU', rowspan: 2, templet: function(d){
          var sku = JSON.parse(d.sku)
          var sku_str = '';
          $.each(sku, function(i,v){
            sku_str += v.attr + ','
          })
          return sku_str.slice(0, -1);
        }}
        ,{field: 'sku_img', title: 'SKU图片', rowspan: 2, width: 100,templet: function(d){
          return '<img src="__FILEROOT__/thumb'+d.sku_img+'"';
        }}
        ,{title: '分类', align:'center', colspan: 2}
        ,{field: 'stocks', title: '库存', rowspan: 2}
        ,{field: 'price', title: '售卖价', rowspan: 2}
        ,{field: 'market_price', title: '市场价', rowspan: 2}
        ,{field:'is_sold', title:'是否上架', templet:'#statusTpl', rowspan: 2, width: 100}
        ,{title: '操作',toolbar: '#optTpl', rowspan: 2}
      ],[
        {field: 'ccname', title: '一级'}
        ,{field: 'cname', title: '二级'}
      ]]
    });
   
    table.on('sort(goodsSku)',function(obj){
      if(tableIns.config.page.count <= tableIns.config.page.limit){
        $('.layui-table-page').addClass('layui-hide');//总条数小于每页限制条数时隐藏分页
      }
    })

    //监听搜索
    form.on('submit(goodsSearch)', function(data){
      let field = data.field;
      //执行重载
      tableIns.reload({
        where: field
        ,page:{curr:1}
      });

      return false;
    });
    
    
    form.on('switch(optstatus)', function(obj){
      var wish = obj.elem.checked
      var id = obj.value
      $.post($('#statusTpl').data('url'),{id:id, is_sold: wish, goods_id: $(obj.elem).data('gid')}, function(res){
        if(res.code != 1){
          layer.tips(res.result, obj.othis, {tips:1});
          obj.elem.checked = !wish;
          form.render('checkbox');
        }
      }, 'json')
    })

    table.on('tool(goodsSku)', function(obj){
        switch(obj.event){
            case 'change':
              layer.open({
                type: 2
                ,title: 'SKU设置'
                ,content: "{:route('Shop/skuSet')}?id="+obj.data.id
                ,area: ['420px', '500px']
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                  // console.log(index)
                  var iframeWindow = window['layui-layer-iframe'+ index]
                  ,submitID = 'sku-set'
                  ,submit = layero.find('iframe').contents().find('#'+ submitID);

                  //监听提交
                  iframeWindow.layui.form.on('submit('+ submitID +')', function(data){
                    var field = data.field;
                    
                    $.post('{:route(\'Shop/modifySku\')}', field, function(res){
                      if(res.code == 1){
                        table.reload('goodsSku'); //数据刷新
                        layer.close(index); //关闭弹层
                      }else{
                        layer.msg(res.result, {icon: 5});
                      }
                    }, 'json')
                    
                  });
                  submit.trigger('click');
                }
              });
          break;
          case 'del':
              layer.confirm('确定删除？', function(index){
     
                   $.post("{:route('Shop/skuDel')}", {id:obj.data.id}, function(res){
                      if(res.code == 1){
                        layer.msg('删除成功');
                        table.reload('goodsSku'); //重载表格
                        layer.close(index); //再执行关闭 
                      }else{
                        layer.msg(res.result, {icon: 5});
                      }
                    },'json');

                }); 
          break;
        };
    });
  });
</script>
{/block}